<script setup lang="ts">
import { useUserOpStore } from "@renderer/store/pinia/userOp";
import { EnumOpType, EnumResetSubType, IOpType} from "@renderer/assets/types";
import { ref, computed,inject } from "vue";
import { op2Icon } from "@renderer/view/components/components/helper";
import { sendSocketIoMsg } from "@renderer/api/request";
import BaseIcon from "@renderer/assets/icon/BaseIcon.vue";
import { getActiveTabViewOp } from "@renderer/view/hooks/common";

const props = defineProps({
  withDropdown: {
    type: Boolean,
    default: true,
  },
  icon: {
    type: String,
    default: "",
  },
  tips: {
    type: String,
    default: "",
  },
  active: {
    type: Boolean,
    default: false,
  },
  opType: {
    type: Object,
    default: {
      type: EnumOpType.none,
      subType: ""
    },
  },
  svgBtn: {
    type:Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  }
});

const {
  activeViewRef: activeView,
  activeOpObjRef
} = getActiveTabViewOp()

const opStore = useUserOpStore();

const currentOpTypeRef = ref<IOpType>(props.opType as IOpType);

const currentIcon = computed(() => {
    if (currentOpTypeRef.value.subType === ''){
      return props.icon;
    }else {
      return op2Icon[currentOpTypeRef.value.subType];
    }
})

const handleClick = () => {
  currentOpTypeRef.value.type = props.opType.type
  if (currentOpTypeRef.value.type === EnumOpType.reset){
    const msg = {
      viewType: activeView.value.viewType,
      opType: EnumOpType.reset,
      subOpType: EnumResetSubType.resetAll,
    }
    sendSocketIoMsg(msg)
  }
  opStore.setActiveOp(activeView.value.viewId,currentOpTypeRef.value)
};

const handleChooseMenu = (item: any) => {
  currentOpTypeRef.value.subType = item.type
  opStore.setActiveOp(activeView.value.viewId,currentOpTypeRef.value);
}

const disabled = computed(() =>{
  if (!activeOpObjRef.value){
    return true
  }
  if (props.disabled){
    return true
  }
  return activeOpObjRef.value?.disabledOpList.includes(props.opType.type)
})

const btnColor = computed(() =>{
   return activeOpObjRef.value?.activeOp.type
            === props.opType.type ? 'active' : ''
})
</script>

<template>
  <v-menu location="top">
    <template v-slot:activator="{ props: menuProp }">
      <v-btn-group class="!h-[35px] !mr-[5px]">
        <v-tooltip :text="tips" location="bottom" >
          <template v-slot:activator="{ props }">
            <v-btn
              class="!w-[55px] !min-w-[35px]"
              v-if="!svgBtn"
              :disabled="disabled"
              :ripple="false"
              :color="btnColor"
              v-bind="menuProp"
            >
              <div class="flex items-center">
                <v-icon size="25" :icon="currentIcon"></v-icon>
                <v-icon size="25" icon="mdi-arrow-down-thin"></v-icon>
              </div>
            </v-btn>
            <v-btn v-else
                   class="!w-[50px] !min-w-[35px]"
                   :disabled="disabled"
                   :ripple="false"
                   :color="activeOpObjRef?.activeOp.type === opType.type
                              ? 'active' : ''"
                   v-bind="menuProp"
                   :icon="currentIcon"
            >
              <base-icon :name="icon"></base-icon>
              <v-icon icon="mdi-arrow-down-thin"></v-icon>
            </v-btn>
          </template>
        </v-tooltip>
      </v-btn-group>
    </template>


    <slot name="dropdownSlot"
          :handleChooseMenu="handleChooseMenu"
          :disabled="disabled"
    > </slot>
  </v-menu>
</template>

<style scoped>


</style>
